<template>
  <div style="height:100%;">
    <transition :name="transform">
      <router-view keep-alive></router-view>
    </transition>
  </div>
</template>

<script>
 export default {
   data() {
     return {
       transform: 'tran'
     }
   },
   watch: {
     '$route'(to, from) {
       if(from.meta.index > to.meta.index) {
         this.transform = 'tran-left'
       }else{
         this.transform = 'tran-right'
       }
     }
   }
 }
</script>

<style lang="stylus">
  .tran-left-enter-active, .tran-left-leave-active, .tran-right-enter-active, .tran-right-leave-active
    transition: all 250ms
    position: absolute
  // 动画过程中固定页面高度为视窗高度, 防止底部fixed布局抖动
  .tran-left-leave-active, .tran-left-enter-active, .tran-right-leave-active, .tran-right-enter-active
    width: 100%
    height: 100%
  // 动画透明度变化
  .tran-left-leave-to, .tran-left-enter, .tran-right-leave-to, .tran-right-enter
    opacity: 0
  .tran-left-leave-to
    transform: translate3d(100%, 0, 0)
  .tran-left-enter
    transform: translate3d(-100%, 0, 0)
  .tran-right-leave-to
    transform: translate3d(-100%, 0, 0)
  .tran-right-enter
    transform: translate3d(100%, 0, 0)
</style>
